<div class="box box-info">
  <div class="box-header with-border">
    <h3 class="box-title">股票编辑表单</h3>
  </div>
  <!-- /.box-header -->
  <!-- form start -->
  <form class="form-horizontal" [formGroup]='formModule'>
    <div class="box-body">
      <div class="form-group" [class.has-error]='formModule.get("name").touched && formModule.get("name").invalid'>
        <label for="name" class="col-sm-2 control-label">股票名称</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="name" formControlName='name' placeholder="股票名称" autocomplete="off">
          <div *ngIf='formModule.get("name").invalid'>
            <span class='help-block' *ngIf='formModule.get("name").touched && formModule.hasError("required","name")'>股票名称不能为空</span>
            <span class='help-block' *ngIf='formModule.get("name").touched && formModule.hasError("minlength","name")'>股票名称最少三个字符</span>
          </div>
        </div>
      </div>
      <div class="form-group" [class.has-error]='formModule.get("price").touched && formModule.get("price").invalid'>
        <label for="price" class="col-sm-2 control-label">股票价格</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="price" formControlName='price' placeholder="股票价格">
          <div *ngIf='formModule.get("price").invalid'>
            <span class='help-block' *ngIf='formModule.get("price").touched && formModule.hasError("required","price")'>股票价格不能为空</span>
            <span class='help-block' *ngIf='formModule.get("price").touched && formModule.hasError("priceError","price")'>
              {{formModule.getError('priceError','price')}}
            </span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="rating" class="col-sm-2 control-label">股票星级</label>
        <div class="col-sm-6">
          <app-stars [(rating)]='stock.rating' [readOnly]='false'></app-stars>
        </div>
      </div>
      <div class="form-group">
        <label for="desc" class="col-sm-2 control-label">股票描述</label>
        <div class="col-sm-6">
          <textarea name="" id="desc" cols="30" rows="10" class='form-control' formControlName='desc'></textarea>
        </div>
      </div>
      <div class="form-group" [class.has-error]='formModule.get("categories").touched && formModule.get("categories").invalid'>
        <label for="desc" class="col-sm-2 control-label">股票类别</label>
        <div class="col-sm-6">
          <div class='row' formArrayName='categories'>
            <div class='col-sm-2' *ngFor='let category of categories;let i = index;'>
              <div class="checkbox">
                <label>
                 <input type="checkbox" [formControlName]='i'> {{category}}
                </label>
              </div>
            </div>
          </div>
          <div *ngIf='formModule.get("categories").invalid'>
            <span class='help-block' *ngIf='formModule.get("categories").touched && formModule.hasError("categoriesEmpty","categories")'>至少选择一个股票类别</span>
          </div>
        </div>
      </div>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
      <button (click)='cancel()' type="button" class="btn btn-default">取消</button>
      <button (click)='save()' type="button" [disabled]='formModule.invalid' class="btn btn-danger pull-right">保存</button>
    </div>
    <!-- /.box-footer -->
  </form>
</div>
